<template>
    <div class="productList">
        <!-- 导航栏开始 -->
        <van-nav-bar
        title="服务列表"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        />
        <!-- 导航栏结束 -->
        <div class="product">
            <!-- 侧边导航开始 -->
            <div class="sidbar">
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item @click="update(item.id)" v-for="item in categorys" :key='item.id' :title="item.name" />
                </van-sidebar>
            </div>
            <!-- 侧边导航结束 -->
            <!-- 内容开始 -->
            <div class="content">
                <van-card
                    v-for="item in productList" 
                    :key="item.id"
                    :price="item.price"
                    :desc="item.description"
                    :title="item.name"
                    :thumb="item.photo"
                    >
                    <template #footer>
                        <van-stepper min='0' default-value='0' v-model="item.num" @plus='plusHandler(item)' style="margin-top:1em" />
                    </template>
                    </van-card>
                    <van-submit-bar style="margin-bottom:50px" :price="total*100" button-text="提交订单" @submit="onSubmit" button-color="#8430ff"/>
            </div>
            <!-- 内容结束 -->
        </div>
    </div>
</template>
<script>
import {get} from '@/http/axios.js'
export default {
    data(){
        return {
            activeKey:1,
            categorys:[],
            list:{
                page:1,
                pageSize:1000
            },
            categoryId:'',
            productList:[],
            carGoods:new Set(),
            total:1
        }
    },
    methods:{
        //返回
        onClickLeft(){
            this.$router.back()
        },
        //查询所有栏目信息
        findAllCategory(){
            get('/productCategory/pageQuery',this.list).then(res=>{
                this.categorys = res.data.data.list
            })
        },
        //根据栏目ID查询产品
        findAllProductById(){
            this.list.productCategoryId = this.categoryId
            get('/product/pageQuery',this.list).then(res=>{
                this.productList = res.data.data.list
            })
        },
        plusHandler(item){
            this.carGoods.add(item)
        },
        getTotal(){
            //总计
            let price = 0
            for(let item in this.carGoods){
                price += item.num*item.price
            }
            this.total = price
            console.log(this.total);
        },
        //更新数据
        update(id){
            this.categoryId = id
            this.findAllProductById()
        },
        onSubmit(){
            // alert(999)
            this.$router.push({path:'/manager/submit'})
        }
    },
    created(){
        this.findAllCategory()
    },
    beforeMount(){
        this.activeKey = this.$route.query.activeKey
        this.categoryId = this.$route.query.categoryId
    },
    mounted(){
        this.findAllProductById()
    }
}
</script>
<style scoped>
.product {
    display: flex;
}
.product .sidbar {
    width: 150px;
    resize: horizontal;
    overflow: hidden;
}
.product .content {
    flex: 1;
}
.van-sidebar {
    width: 150px !important;
}
</style>
